<!--电子文件中心-->
<template>
  <div class="electron-file">
    <left-tree
      :isShowLeftTree.sync="isShowLeftTree"
      :treeData="treeData">
    </left-tree>
    <div class="electron-right" :style="{width: (isShowLeftTree ? 'calc(100% - 2px)': '82%')}">
      <splitpanes horizontal>
        <pane size="50">
          <a-card size="small" :headStyle="{ background: '#f9f9f9' }" :bodyStyle="{ height: 'calc(100% - 48px)' }">
            <div slot="title">
              <div class="top-icon">
                <icon-font type="icon-dianziwenjianguanli1" />
              </div>
              <span>电子文件中心</span>
            </div>
            <div slot="extra">
              <a-cascader
                :options="options"
                placeholder="列表选择"
                class="icon-button"></a-cascader>
              <a-dropdown placement="bottomRight" class="icon-button">
                <a-button type="primary" icon="upload">文件按钮</a-button>
                <a-menu slot="overlay">
                  <template v-for="(item, index) in fileVerb">
                    <a-menu-item :key="index" :disabled="item.status">
                      <span class="icon iconfont" :class="item.icon" style="margin-right: 6px;"></span>
                      {{ item.title }}
                    </a-menu-item>
                    <a-menu-divider :key="item.title" v-if="item.isdivided" />
                  </template>
                </a-menu>
              </a-dropdown>
              <a-button type="primary" icon="check" @click="dialogCheckVisible = true" class="icon-button">四性检测</a-button>
              <a-button type="primary" icon="upload">文件归档</a-button>
            </div>
            <el-table
              :data="electronTableData"
              highlight-current-row
              border
              height="100%"
              :row-style="{height:'40px'}"
              :cell-style="{padding:'0px'}"
              :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
              style="width: 100%">
              <el-table-column
                type="selection"
                width="50">
              </el-table-column>
              <slot v-for="(item,index) in electronColumns">
                <el-table-column
                  v-if="item.field!=='IsCheck'"
                  :key="index"
                  :property="item.field"
                  :label="item.title"
                  :width="item.width"
                  show-overflow-tooltip
                  sortable>
                </el-table-column>
                <el-table-column
                  v-if="item.field==='IsCheck'"
                  :key="index"
                  :property="item.field"
                  :label="item.title"
                  :width="item.width"
                  show-overflow-tooltip
                  sortable>
                  <template slot-scope="scope">
                    <a-tag color="blue" v-if="scope.row.IsCheck">检测通过</a-tag>
                    <a-tag color="red" v-else>未通过</a-tag>
                  </template>
                </el-table-column>
              </slot>
            </el-table>
          </a-card>
        </pane>
        <pane size="50">
          <el-tabs type="border-card">
            <el-tab-pane label="组件信息">
              <full-tab></full-tab>
            </el-tab-pane>
            <el-tab-pane label="档案元数据信息">
              <meta-tab1></meta-tab1>
            </el-tab-pane>
            <el-tab-pane label="办理流程元数据信息">
              <meta-tab2></meta-tab2>
            </el-tab-pane>
            <el-tab-pane label="电子文件元数据信息">
              <meta-tab3></meta-tab3>
            </el-tab-pane>
            <el-tab-pane label="四性检测结果">
              <check-tab></check-tab>
            </el-tab-pane>
          </el-tabs>
        </pane>
      </splitpanes>
    </div>

    <!-- 四性检测弹框 -->
    <a-modal
      :maskClosable="false"
      title="四性检测"
      v-model="dialogCheckVisible"
      width="60%"
      :body-style="{ padding: 0 }">
      <four-check></four-check>
    </a-modal>
  </div>
</template>

<script>
import { FourCheck } from '@/components'
import { LeftTree, FullTab, MetaTab1, MetaTab2, MetaTab3, CheckTab } from './components'
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
export default {
  name: '',
  components: {
    FourCheck,
    LeftTree,
    FullTab,
    MetaTab1,
    MetaTab2,
    MetaTab3,
    CheckTab,
    Splitpanes,
    Pane
  },
  data () {
    return {
      options: [
        {
          label: '诉讼档案案卷表',
          value: 1
        },
        {
          label: '科研卷内表',
          value: 2
        }
      ],
      treeData: [ // 左侧分类树数据
        {
          title: 'DQ 党群以件工作',
          key: 1,
          children: [
            {
              title: 'DQ11 党务综合',
              key: 2
            },
            {
              title: 'DQ12 纪检、监察',
              key: 3
            },
            {
              title: 'DQ13 组织',
              key: 4
            },
            {
              title: 'DQ14 宣传',
              key: 5
            },
            {
              title: 'DQ15 统战',
              key: 6
            },
            {
              title: 'DQ16 工会',
              key: 7
            },
            {
              title: 'DQ17 团委',
              key: 8
            },
            {
              title: 'DQ 党群',
              key: 9
            }
          ]
        }
      ],
      electronTableData: [ // 文件表格数据
        {
          Index: 1,
          Year: '2020',
          Code: '2020·1233-Y-0001',
          WH: '123',
          ResponsiblePerson: '城投公司',
          topic: '关于项目运营管理通知',
          BGQXData: '永久',
          FillTime: '2020-07-31',
          Security: '绝密',
          PageCount: '10',
          IsCheck: false,
          Remake: '123'
        },
        {
          Index: 2,
          Year: '2020',
          Code: '2020·1233-Y-0002',
          WH: '456',
          ResponsiblePerson: '中共上海市委组织部',
          topic: '关于某项目的使用及委托经营管理文件',
          BGQXData: '永久',
          FillTime: '2020-07-31',
          Security: '机密',
          PageCount: '20',
          IsCheck: true,
          Remake: '456'
        }
      ],
      electronColumns: [ // 文件表格表头数据
        {
          title: '顺序号',
          field: 'Index'
        },
        {
          title: '年代号',
          field: 'Year'
        },
        {
          title: '档号',
          field: 'Code'
        },
        {
          title: '文号',
          field: 'WH'
        },
        {
          title: '责任者',
          field: 'ResponsiblePerson'
        },
        {
          title: '题名',
          field: 'topic'
        },
        {
          title: '保管期限',
          field: 'BGQXData'
        },
        {
          title: '归档日期',
          field: 'FillTime'
        },
        {
          title: '密级',
          field: 'Security'
        },
        {
          title: '页数',
          field: 'PageCount'
        },
        {
          title: '检测标识',
          field: 'IsCheck'
        },
        {
          title: '备注',
          field: 'Remake'
        }
      ],
      fileVerb: [ // 文件表格常规按钮操作集合
        { title: '添加文件', icon: 'icon-knowledge-base', status: true, isdivided: true },
        { title: '修改文件', icon: 'icon-wj-xgwj-t', status: false, isdivided: true },
        { title: '删除文件', icon: 'icon-shanchuwenjianjia', status: false, isdivided: true },
        { title: '克隆文件', icon: 'icon-kelong1', status: false, isdivided: true },
        { title: '导入文件', icon: 'icon-yizhi1', status: false, isdivided: true },
        { title: '修改分类', icon: 'icon-009xiugaifenlei', status: false, isdivided: true },
        { title: '挂接全文', icon: 'icon-lianjie', status: false, isdivided: false }
      ],
      dialogCheckVisible: false, // 四性检测弹框是否显示
      isShowLeftTree: true // 左侧树显示与隐藏
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
  }
}
</script>
<style lang="less" scoped>
@import '../../assets/icons/iconfont.css';
.electron-file {
  width: 100%;
  height: 100%;
  padding: 10px 10px 0;
  background: #f0f2f5;
  .electron-right {
    float: left;
    width: 82%;
    height: 100%;
    transition: all 0.2s;
    .el-tabs {
      height: 100%;
      /deep/ .el-tabs__content {
        padding: 10px;
        height: calc(100% - 40px);
        .el-tab-pane {
          height: 100%;
        }
      }
    }
  }
}
</style>
